{% extends 'base.html' %}
{% block title %}医生管理{% endblock %}

{% block head %}
{{ super() }}
<style>
.doctors-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin: 0;
    padding: 30px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.page-title {
    font-size: 2rem;
    font-weight: 400;
    color: #333;
    margin: 0;
}

.btn-add-doctor {
    padding: 0.5rem 1rem;
    background-color: #28a745;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn-add-doctor:hover {
    background-color: #218838;
    color: white;
    text-decoration: none;
}

.search-box {
    margin-bottom: 20px;
}

.search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
}

.search-input:focus {
    border-color: #4a90e2;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(74,144,226,0.25);
}

.doctors-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.doctors-table th,
.doctors-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e9ecef;
}

.doctors-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
}

.doctors-table tbody tr:hover {
    background-color: #f8f9fa;
}

.doctor-actions {
    display: flex;
    gap: 8px;
}

.btn-edit, .btn-delete {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-edit {
    background-color: #4a90e2;
    color: white;
}

.btn-edit:hover {
    background-color: #357abd;
}

.btn-delete {
    background-color: #dc3545;
    color: white;
}

.btn-delete:hover {
    background-color: #c82333;
}

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>
{% endblock %}

{% block content %}
<div class="doctors-container">
    <div class="page-header">
        <h2 class="page-title">医生管理系统</h2>
        <a href="{{ url_for('add_doctor') }}" class="btn-add-doctor">
            <i class="fas fa-plus"></i> 添加医生
        </a>
    </div>

    <div class="search-box">
        <input type="text" class="search-input" id="doctorSearch" placeholder="搜索医生姓名..." onkeyup="searchDoctors()">
    </div>

    <table class="doctors-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>性别</th>
                <th>职称</th>
                <th>所属科室</th>
                <th>联系电话</th>
                <th>入职日期</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for doctor in doctors %}
            <tr>
                <td>{{ doctor['医生ID'] }}</td>
                <td>{{ doctor['姓名'] }}</td>
                <td>{{ doctor['性别'] }}</td>
                <td>{{ doctor['职称'] }}</td>
                <td>{{ doctor['科室名称'] }}</td>
                <td>{{ doctor['联系电话'] }}</td>
                <td>{{ doctor['入职日期'].strftime('%Y-%m-%d') }}</td>
                <td class="doctor-actions">
                    <button class="btn-edit" data-id="{{ doctor['医生ID'] }}" onclick="editDoctor(this)">
                        <i class="fas fa-edit"></i> 编辑
                    </button>
                    <button class="btn-delete" data-id="{{ doctor['医生ID'] }}" data-name="{{ doctor['姓名']|escape }}" onclick="deleteDoctor(this)">
                        <i class="fas fa-trash"></i> 删除
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
</div>

<script>
function searchDoctors() {
    const input = document.getElementById('doctorSearch');
    const filter = input.value.toLowerCase();
    const tbody = document.querySelector('.doctors-table tbody');
    const rows = tbody.getElementsByTagName('tr');

    for (let row of rows) {
        const nameCell = row.getElementsByTagName('td')[1];
        if (nameCell) {
            const name = nameCell.textContent || nameCell.innerText;
            if (name.toLowerCase().indexOf(filter) > -1) {
                row.style.display = '';
            } else {
                row.style.display = 'none';
            }
        }
    }
}

function editDoctor(btn) {
    const doctorId = btn.getAttribute('data-id');
    window.location.href = `/doctors/edit/${doctorId}`;
}

function showLoading() {
    document.getElementById('loadingOverlay').style.display = 'flex';
}

function hideLoading() {
    document.getElementById('loadingOverlay').style.display = 'none';
}

function deleteDoctor(btn) {
    const doctorId = btn.getAttribute('data-id');
    const doctorName = btn.getAttribute('data-name');
    if (confirm(`确定要删除医生"${doctorName}"的记录吗？此操作不可恢复！`)) {
        showLoading();
        fetch(`/doctors/delete/${doctorId}`, {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            hideLoading();
            if (data.success) {
                alert('删除成功！');
                location.reload();
            } else {
                alert('删除失败：' + data.message);
            }
        })
        .catch(error => {
            hideLoading();
            console.error('Error:', error);
            alert('删除失败，请稍后重试');
        });
    }
}
</script>
{% endblock %}
